aboutsummaryrefslogtreecommitdiff
path: root/src/app/anime/[id]
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/anime/[id]')
-rw-r--r--src/app/anime/[id]/loading.css346
-rw-r--r--src/app/anime/[id]/loading.jsx8
-rw-r--r--src/app/anime/[id]/loading.module.css12
3 files changed, 17 insertions, 349 deletions
diff --git a/src/app/anime/[id]/loading.css b/src/app/anime/[id]/loading.css
deleted file mode 100644
index aa3a519..0000000
--- a/src/app/anime/[id]/loading.css
+++ /dev/null
@@ -1,346 +0,0 @@
-.loadingContainer {
- color: white;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 80dvh;
-}
-
-
-.text-flicker-in-glow {
- -webkit-animation: text-flicker-in-glow 4s linear both;
- animation: text-flicker-in-glow 4s linear both;
- font-size: 36px;
- font-family: "Kanit";
-}
-
-/* ----------------------------------------------
- * Generated by Animista on 2024-3-21 9:58:16
- * Licensed under FreeBSD License.
- * See http://animista.net/license for more info.
- * w: http://animista.net, t: @cssanimista
- * ---------------------------------------------- */
-
-/**
- * ----------------------------------------
- * animation text-flicker-in-glow
- * ----------------------------------------
- */
-
-@-webkit-keyframes text-flicker-in-glow {
- 0% {
- opacity: 0;
- }
-
- 10% {
- opacity: 0;
- text-shadow: none;
- }
-
- 10.1% {
- opacity: 1;
- text-shadow: none;
- }
-
- 10.2% {
- opacity: 0;
- text-shadow: none;
- }
-
- 20% {
- opacity: 0;
- text-shadow: none;
- }
-
- 20.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
- }
-
- 20.6% {
- opacity: 0;
- text-shadow: none;
- }
-
- 30% {
- opacity: 0;
- text-shadow: none;
- }
-
- 30.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
- }
-
- 30.5% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
- }
-
- 30.6% {
- opacity: 0;
- text-shadow: none;
- }
-
- 45% {
- opacity: 0;
- text-shadow: none;
- }
-
- 45.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
- }
-
- 50% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
- }
-
- 55% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
- }
-
- 55.1% {
- opacity: 0;
- text-shadow: none;
- }
-
- 57% {
- opacity: 0;
- text-shadow: none;
- }
-
- 57.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
- }
-
- 60% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
- }
-
- 60.1% {
- opacity: 0;
- text-shadow: none;
- }
-
- 65% {
- opacity: 0;
- text-shadow: none;
- }
-
- 65.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-
- 75% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-
- 75.1% {
- opacity: 0;
- text-shadow: none;
- }
-
- 77% {
- opacity: 0;
- text-shadow: none;
- }
-
- 77.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-
- 85% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-
- 85.1% {
- opacity: 0;
- text-shadow: none;
- }
-
- 86% {
- opacity: 0;
- text-shadow: none;
- }
-
- 86.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-
- 100% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-}
-
-@keyframes text-flicker-in-glow {
- 0% {
- opacity: 0;
- }
-
- 10% {
- opacity: 0;
- text-shadow: none;
- }
-
- 10.1% {
- opacity: 1;
- text-shadow: none;
- }
-
- 10.2% {
- opacity: 0;
- text-shadow: none;
- }
-
- 20% {
- opacity: 0;
- text-shadow: none;
- }
-
- 20.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
- }
-
- 20.6% {
- opacity: 0;
- text-shadow: none;
- }
-
- 30% {
- opacity: 0;
- text-shadow: none;
- }
-
- 30.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
- }
-
- 30.5% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
- }
-
- 30.6% {
- opacity: 0;
- text-shadow: none;
- }
-
- 45% {
- opacity: 0;
- text-shadow: none;
- }
-
- 45.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
- }
-
- 50% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
- }
-
- 55% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
- }
-
- 55.1% {
- opacity: 0;
- text-shadow: none;
- }
-
- 57% {
- opacity: 0;
- text-shadow: none;
- }
-
- 57.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
- }
-
- 60% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
- }
-
- 60.1% {
- opacity: 0;
- text-shadow: none;
- }
-
- 65% {
- opacity: 0;
- text-shadow: none;
- }
-
- 65.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-
- 75% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-
- 75.1% {
- opacity: 0;
- text-shadow: none;
- }
-
- 77% {
- opacity: 0;
- text-shadow: none;
- }
-
- 77.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-
- 85% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-
- 85.1% {
- opacity: 0;
- text-shadow: none;
- }
-
- 86% {
- opacity: 0;
- text-shadow: none;
- }
-
- 86.1% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-
- 100% {
- opacity: 1;
- text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
- }
-}
-
-@media (prefers-color-scheme: light) {
- .loadingContainer {
- color: black;
- }
-} \ No newline at end of file
diff --git a/src/app/anime/[id]/loading.jsx b/src/app/anime/[id]/loading.jsx
index dfa397c..b5670da 100644
--- a/src/app/anime/[id]/loading.jsx
+++ b/src/app/anime/[id]/loading.jsx
@@ -1,9 +1,11 @@
-import "./loading.css";
+import styles from "./loading.module.css";
export default function Loading() {
return (
- <div className="loadingContainer">
- <p className="text-flicker-in-glow">Loading</p>
+ <div className={styles.loadingContainer}>
+ <p className={styles.loadingText}>
+ Please wait while we load all the data for you.
+ </p>
</div>
);
}
diff --git a/src/app/anime/[id]/loading.module.css b/src/app/anime/[id]/loading.module.css
new file mode 100644
index 0000000..c95784d
--- /dev/null
+++ b/src/app/anime/[id]/loading.module.css
@@ -0,0 +1,12 @@
+.loadingContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 90dvh;
+}
+
+.loadingText {
+ color: white;
+ font-family: "Lato";
+ font-size: 24px;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-28 11:27:37 +0000